/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-0z2fsx2qju] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-0z2fsx2qju] {
    flex: 1;
}

.sidebar[b-0z2fsx2qju] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-0z2fsx2qju] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-0z2fsx2qju]  a, .top-row[b-0z2fsx2qju]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-0z2fsx2qju]  a:hover, .top-row[b-0z2fsx2qju]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-0z2fsx2qju]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-0z2fsx2qju] {
        justify-content: space-between;
    }

    .top-row[b-0z2fsx2qju]  a, .top-row[b-0z2fsx2qju]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-0z2fsx2qju] {
        flex-direction: row;
    }

    .sidebar[b-0z2fsx2qju] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-0z2fsx2qju] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-0z2fsx2qju]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-0z2fsx2qju], article[b-0z2fsx2qju] {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-c9eglrnwr8] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-c9eglrnwr8] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-c9eglrnwr8] {
    font-size: 1.1rem;
}

.bi[b-c9eglrnwr8] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-c9eglrnwr8] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-c9eglrnwr8] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-c9eglrnwr8] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-c9eglrnwr8] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-c9eglrnwr8] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-c9eglrnwr8] {
        padding-bottom: 1rem;
    }

    .nav-item[b-c9eglrnwr8]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-c9eglrnwr8]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-c9eglrnwr8]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-c9eglrnwr8] {
        display: none;
    }

    .collapse[b-c9eglrnwr8] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-c9eglrnwr8] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Chat.razor.rz.scp.css */
/* Main container */
.chat-page-container[b-3ngv0wadp7] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    flex: 1; /* Take up all available space */
}

/* And update chat-header to account for MainLayout's top-row */
.chat-header[b-3ngv0wadp7] {
    flex: 0 0 60px;
    background-color: #2c3e50;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Main content area with split view */
.chat-content[b-3ngv0wadp7] {
    flex: 1;
    display: flex;
    min-height: 0; /* Important for flex child */
}

/* Left sidebar - people list */
.people-sidebar[b-3ngv0wadp7] {
    flex: 0 0 300px;
    border-right: 1px solid #e1e4e8;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Search bar */
.search-container[b-3ngv0wadp7] {
    padding: 10px;
    border-bottom: 1px solid #e1e4e8;
}

.search-input[b-3ngv0wadp7] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* People list */
.people-list[b-3ngv0wadp7] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.person-item[b-3ngv0wadp7] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .person-item:hover[b-3ngv0wadp7] {
        background-color: #f9f9f9;
    }

    .person-item.active[b-3ngv0wadp7] {
        background-color: #e6f7ff;
        border-right: 3px solid #1890ff;
    }

.person-avatar[b-3ngv0wadp7] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1890ff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

.person-info[b-3ngv0wadp7] {
    flex: 1;
    min-width: 0;
}

.person-name[b-3ngv0wadp7] {
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-preview[b-3ngv0wadp7] {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-meta[b-3ngv0wadp7] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 45px;
}

.message-time[b-3ngv0wadp7] {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 5px;
}

.message-badge[b-3ngv0wadp7] {
    background-color: #1890ff;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.person-status[b-3ngv0wadp7] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
}

.status-online[b-3ngv0wadp7] {
    background-color: #52c41a;
}

.status-offline[b-3ngv0wadp7] {
    background-color: #d9d9d9;
}

.status-sos[b-3ngv0wadp7] {
    background-color: #f5222d;
}

/* Right side - chat window */
.chat-window[b-3ngv0wadp7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f7f9fa;
    height: 100%; /* Ensure it takes full height */
}

.chat-window-header[b-3ngv0wadp7] {
    flex: 0 0 60px; /* Fixed height, won't grow or shrink */
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #e1e4e8;
    background-color: white;
    z-index: 1; /* Keep header above scrollable content */
}

.chat-messages[b-3ngv0wadp7] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
    min-height: 0; /* Critical for proper scrolling in flex container */
}

/* Helper class to auto-scroll to bottom */
.scroll-to-bottom[b-3ngv0wadp7] {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    scroll-behavior: smooth;
}

    .scroll-to-bottom[b-3ngv0wadp7]:after {
        content: "";
        height: 1px;
        margin-top: auto;
    }

.message[b-3ngv0wadp7] {
    max-width: 70%;
    margin-bottom: 15px;
    padding: 10px 15px;
    border-radius: 18px;
    position: relative;
    word-break: break-word;
}

.message-received[b-3ngv0wadp7] {
    align-self: flex-start;
    background-color: white;
    border: 1px solid #e1e4e8;
    border-bottom-left-radius: 4px;
}

.message-sent[b-3ngv0wadp7] {
    align-self: flex-end;
    background-color: #1890ff;
    color: white;
    border-bottom-right-radius: 4px;
}

.message-time-stamp[b-3ngv0wadp7] {
    font-size: 0.7rem;
    color: #999;
    margin-top: 5px;
    text-align: right;
}

.message-received .message-time-stamp[b-3ngv0wadp7] {
    text-align: left;
}

.chat-input[b-3ngv0wadp7] {
    flex: 0 0 auto; /* This prevents the input from shrinking */
    display: flex;
    padding: 15px;
    background-color: white;
    border-top: 1px solid #e1e4e8;
    z-index: 1; /* Keep input above scrollable content */
}

.message-input[b-3ngv0wadp7] {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    resize: none;
    max-height: 120px; /* Limit the height of textarea */
    min-height: 44px; /* Match the send button height */
}

/* Send button styling */
.send-button[b-3ngv0wadp7] {
    margin-left: 10px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 50%; /* Make it circular */
    width: 44px; /* Fixed width */
    height: 44px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 0; /* Remove padding */
}

    .send-button:hover[b-3ngv0wadp7] {
        background-color: #40a9ff;
    }

    .send-button:disabled[b-3ngv0wadp7] {
        background-color: #d9d9d9;
        cursor: not-allowed;
    }

    .send-button svg[b-3ngv0wadp7] {
        color: white; /* Ensure icon is white */
    }

.empty-state[b-3ngv0wadp7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    padding: 20px;
    text-align: center;
}

.empty-icon[b-3ngv0wadp7] {
    font-size: 4rem;
    margin-bottom: 20px;
}

.connection-status[b-3ngv0wadp7] {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
}

    .connection-status .indicator[b-3ngv0wadp7] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
    }

.connected .indicator[b-3ngv0wadp7] {
    background-color: #52c41a;
}

.disconnected .indicator[b-3ngv0wadp7] {
    background-color: #f5222d;
}

/* Loading indicator */
.loading-container[b-3ngv0wadp7] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-dots[b-3ngv0wadp7] {
    display: flex;
}

.dot[b-3ngv0wadp7] {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #1890ff;
}

/* Message date separator */
.message-date-separator[b-3ngv0wadp7] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

    .message-date-separator span[b-3ngv0wadp7] {
        background-color: #f1f1f1;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 0.75rem;
        color: #666;
    }

.message-content[b-3ngv0wadp7] {
    word-break: break-word;
}

/* Latest message styling - helps with auto-scrolling */
.latest-message[b-3ngv0wadp7] {
    scroll-margin-bottom: 20px;
}

/* Make sure new messages come into view */
@keyframes highlight-new-b-3ngv0wadp7 {
    0% {
        background-color: rgba(24, 144, 255, 0.1);
    }

    100% {
        background-color: transparent;
    }
}

.latest-message[b-3ngv0wadp7] {
    animation: highlight-new-b-3ngv0wadp7 1.5s ease-out;
}
/* /Pages/ChatPanel.razor.rz.scp.css */
.chat-container[b-txzn95x9fn] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 330px);
    background-color: #f5f7f9;
    border-radius: 8px;
    overflow: hidden;
}

.chat-messages[b-txzn95x9fn] {
    position: relative;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: 70px; /* Space for input */
    height: 100%;
}


    .chat-messages[b-txzn95x9fn]::after {
        display: none;
    }

.chat-message[b-txzn95x9fn] {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    position: relative;
    animation: fadeIn-b-txzn95x9fn 0.3s ease;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    margin-bottom: 8px; /* Add space between messages */
}

    .chat-message:last-child[b-txzn95x9fn] {
        margin-bottom: 20px; /* Add extra space after the last message */
    }

    .chat-message.sent[b-txzn95x9fn] {
        align-self: flex-end !important; /* Added !important to override any conflicts */
        background-color: #0084ff;
        color: white;
        border-bottom-right-radius: 4px;
        margin-left: 20%; /* Push sent messages to the right */
    }

    .chat-message.received[b-txzn95x9fn] {
        align-self: flex-start !important; /* Added !important to override any conflicts */
        background-color: #e4e6eb;
        color: #050505;
        border-bottom-left-radius: 4px;
        margin-right: 20%; /* Push received messages to the left */
    }

.message-header[b-txzn95x9fn] {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.sent .message-header[b-txzn95x9fn] {
    color: rgba(255, 255, 255, 0.9);
    text-align: right;
}

.received .message-header[b-txzn95x9fn] {
    color: #65676b;
    text-align: left;
}

.message-content[b-txzn95x9fn] {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 4px;
}

.message-footer[b-txzn95x9fn] {
    display: block;
    font-size: 0.65rem;
    opacity: 0.7;
}

.sent .message-footer[b-txzn95x9fn] {
    text-align: right;
    color: rgba(255, 255, 255, 0.7);
}

.received .message-footer[b-txzn95x9fn] {
    text-align: left;
    color: #65676b;
}

textarea[b-txzn95x9fn] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e4e6eb;
    border-radius: 20px;
    resize: none;
    font-family: inherit;
    font-size: 0.9rem;
    background-color: #f0f2f5;
    transition: all 0.2s ease;
}

    textarea:focus[b-txzn95x9fn] {
        outline: none;
        border-color: #0084ff;
        background-color: white;
    }

.send-button[b-txzn95x9fn] {
    width: 36px;
    height: 36px;
    margin-left: 8px;
    border: none;
    border-radius: 50%;
    background-color: #0084ff;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    transition: all 0.2s ease;
}

    .send-button:hover[b-txzn95x9fn] {
        background-color: #0070e0;
    }

    .send-button:disabled[b-txzn95x9fn] {
        background-color: #e4e6eb;
        color: #bcc0c4;
        cursor: not-allowed;
    }

.send-icon[b-txzn95x9fn] {
    font-size: 0.8rem;
    transform: rotate(90deg);
}

/* Add these positioning properties to your existing classes */
.no-messages[b-txzn95x9fn] {
    margin-top: 20px;
    margin-bottom: auto;
}

.loading-indicator[b-txzn95x9fn] {
    margin-top: 20px;
    margin-bottom: auto;
}

.spinner[b-txzn95x9fn] {
    width: 30px;
    height: 30px;
    border: 3px solid #e4e6eb;
    border-top: 3px solid #0084ff;
    border-radius: 50%;
    animation: spin-b-txzn95x9fn 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin-b-txzn95x9fn {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-txzn95x9fn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Webkit scrollbar styling */
.chat-messages[b-txzn95x9fn]::-webkit-scrollbar {
    width: 6px;
}

.chat-messages[b-txzn95x9fn]::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages[b-txzn95x9fn]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

/* Change the scroll-to-bottom class */
.scroll-to-bottom[b-txzn95x9fn] {
    display: flex;
    flex-direction: column-reverse; /* Keep this to show newest at top */
    min-height: 100%;
}

.error-message[b-txzn95x9fn] {
    background-color: #ffcccc;
    border: 1px solid #ff8888;
    border-radius: 8px;
    padding: 16px;
    margin: 16px;
    color: #cc0000;
}

/* Add space between consecutive messages from the same sender */
.chat-message + .chat-message.sent[b-txzn95x9fn] {
    margin-top: 4px;
}

.chat-message + .chat-message.received[b-txzn95x9fn] {
    margin-top: 4px;
}

/* Add more space between messages from different senders */
.chat-message.sent + .chat-message.received[b-txzn95x9fn],
.chat-message.received + .chat-message.sent[b-txzn95x9fn] {
    margin-top: 12px;
}

.chat-input-wrapper[b-txzn95x9fn] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    border-top: 1px solid #e1e1e1;
    padding: 8px 10px;
    width: 100%;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    z-index: 10;
}

.chat-input[b-txzn95x9fn] {
    display: flex;
    padding: 0;
    margin-bottom: 0;
    background-color: white;
    border-top: none;
    position: relative;
    bottom: 0;
    z-index: 5;
}
/* /Pages/Components/Dashboard/AlertsWidget.razor.rz.scp.css */
/* AlertsWidget.razor.css - With increased height */
.alert-widget[b-th7w6nplde] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    height: auto; /* Remove max-height to eliminate scrolling */
}

    .alert-widget .card-body[b-th7w6nplde] {
        padding: 0; /* Remove padding to accommodate custom header */
        height: auto; /* Remove max-height constraint */
    }

    /* Gray header with horizontal divider */
    .alert-widget .section-title-container[b-th7w6nplde] {
        background-color: #f8f9fa;
        padding: 15px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        margin-bottom: 0;
        border-bottom: 1px solid #e9ecef; /* Horizontal divider */
    }

    .alert-widget .section-title[b-th7w6nplde] {
        color: #6c757d;
        margin-bottom: 0;
    }

    .alert-widget .content-area[b-th7w6nplde] {
        padding: 15px;
        height: auto; /* Remove max-height to eliminate scrolling */
        overflow-y: visible; /* Change from auto to visible to prevent scrolling */
    }

.latest-alert[b-th7w6nplde] {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #e8f4f8; /* Cool light blue that's not yellow */
    /* Removed the border-left property */
}

/* Colored borders for severity levels - new styling */
.severity-high[b-th7w6nplde] {
    background-color: #fff5f5;
    border-left-color: #dc3545;
}

.severity-medium[b-th7w6nplde] {
    background-color: #fff8e6;
    border-left-color: #fd7e14;
}

.severity-low[b-th7w6nplde] {
    background-color: #f0f9ff;
    border-left-color: #17a2b8;
}

.alert-header[b-th7w6nplde] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

.alert-content[b-th7w6nplde] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-time[b-th7w6nplde] {
    font-size: 0.85rem;
    color: #6c757d;
}

.alert-category[b-th7w6nplde] {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
}

.alert-headline[b-th7w6nplde] {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}

.alert-metrics[b-th7w6nplde] {
    display: flex;
    gap: 15px;
    margin-top: 5px;
}

.metric[b-th7w6nplde] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
}

.metric-value[b-th7w6nplde] {
    font-weight: 600;
    margin-right: 3px;
}

.alert-stats[b-th7w6nplde] {
    display: flex;
    justify-content: space-between;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

.stat-item[b-th7w6nplde] {
    text-align: center;
    flex: 1;
}

.stat-title[b-th7w6nplde] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.stat-value[b-th7w6nplde] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
}

/* Loading state */
.alert-widget-loading[b-th7w6nplde] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

/* Custom scrollbar styling */
.content-area[b-th7w6nplde]::-webkit-scrollbar {
    width: 6px;
}

.content-area[b-th7w6nplde]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.content-area[b-th7w6nplde]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .content-area[b-th7w6nplde]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.alert-location[b-th7w6nplde] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 8px;
    font-weight: 500;
}

    .alert-location .oi[b-th7w6nplde] {
        color: #6c757d;
        margin-right: 5px;
    }
/* /Pages/Components/Dashboard/ChatWidget.razor.rz.scp.css */
/* ChatWidget.razor.css */
.risk-widget[b-co6debfr8h] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: visible;
    height: auto;
}

    .risk-widget .card-body[b-co6debfr8h] {
        padding: 0; /* Remove padding to accommodate custom header */
        height: auto;
        display: flex;
        flex-direction: column;
    }
    /* Gray header with horizontal divider */
    .risk-widget .section-title-container[b-co6debfr8h] {
        background-color: #f8f9fa;
        padding: 15px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        margin-bottom: 0;
        border-bottom: 1px solid #e9ecef; /* Horizontal divider */
    }

    .risk-widget .section-title[b-co6debfr8h] {
        color: #6c757d;
        margin-bottom: 0;
    }

    .risk-widget .content-area[b-co6debfr8h] {
        padding: 15px;
        overflow-y: visible;
        flex-grow: 1;
    }
/* Latest message styling */
.latest-message[b-co6debfr8h] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.message-header[b-co6debfr8h] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

.message-content[b-co6debfr8h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.message-time[b-co6debfr8h], .message-sender[b-co6debfr8h] {
    font-size: 0.85rem;
    color: #6c757d;
}

.message-text[b-co6debfr8h] {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    word-break: break-word;
}
/* Stats styling */
.chat-stats[b-co6debfr8h] {
    display: flex;
    justify-content: space-between;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
}

.stat-item[b-co6debfr8h] {
    text-align: center;
    flex: 1;
}

.stat-title[b-co6debfr8h] {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 5px;
}

.stat-value[b-co6debfr8h] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
}
/* Widget actions - removed border-top */
.widget-actions[b-co6debfr8h] {
    padding-top: 15px;
    margin-top: 15px;
}
/* Loading animation */
.risk-widget-loading[b-co6debfr8h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

.loading-dots[b-co6debfr8h] {
    display: flex;
    margin-bottom: 20px;
}

.dot[b-co6debfr8h] {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #1890ff;
    animation: pulse-b-co6debfr8h 1.5s infinite ease-in-out;
}

    .dot:nth-child(2)[b-co6debfr8h] {
        animation-delay: 0.3s;
    }

    .dot:nth-child(3)[b-co6debfr8h] {
        animation-delay: 0.6s;
    }

@keyframes pulse-b-co6debfr8h {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}
/* Badge styling */
.badge[b-co6debfr8h] {
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
}
/* /Pages/Components/Dashboard/ClockWidget.razor.rz.scp.css */
/* ClockWidget.razor.css - Matching widget styling from Chat Widget */
.clock-widget[b-nywo8qz4d5] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: visible;
    height: auto;
}

    .clock-widget .card-body[b-nywo8qz4d5] {
        padding: 0; /* Remove padding to accommodate custom header */
        height: auto;
        display: flex;
        flex-direction: column;
    }

    /* Gray header with horizontal divider */
    .clock-widget .section-title-container[b-nywo8qz4d5] {
        background-color: #f8f9fa;
        padding: 15px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        margin-bottom: 0;
        border-bottom: 1px solid #e9ecef; /* Horizontal divider */
    }

    .clock-widget .section-title[b-nywo8qz4d5] {
        color: #6c757d;
        margin-bottom: 0;
    }

    .clock-widget .content-area[b-nywo8qz4d5] {
        padding: 15px;
        overflow-y: visible;
        flex-grow: 1;
    }

/* 3-column clock grid */
.clocks-container[b-nywo8qz4d5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 8px;
}

/* More compact clock item */
.clock-item[b-nywo8qz4d5] {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 8px 4px;
    text-align: center;
    transition: background-color 0.2s;
}

    .clock-item:hover[b-nywo8qz4d5] {
        background-color: #e9ecef;
    }

/* Prioritize time display */
.clock-time[b-nywo8qz4d5] {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 2px;
}

.clock-location[b-nywo8qz4d5] {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .clocks-container[b-nywo8qz4d5] {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
    }
}
/* /Pages/Components/Dashboard/ClockWidgetClassic.razor.rz.scp.css */
/* ClockWidget.razor.css */
.risk-widget[b-lohlfufm3d] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    overflow: visible;
    height: auto;
}

    .risk-widget .card-body[b-lohlfufm3d] {
        padding: 0; /* Remove padding to accommodate custom header */
        height: auto;
        display: flex;
        flex-direction: column;
    }

    /* Gray header with horizontal divider */
    .risk-widget .section-title-container[b-lohlfufm3d] {
        background-color: #f8f9fa;
        padding: 15px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        margin-bottom: 0;
        border-bottom: 1px solid #e9ecef; /* Horizontal divider */
    }

    .risk-widget .section-title[b-lohlfufm3d] {
        color: #6c757d;
        margin-bottom: 0;
    }

    .risk-widget .content-area[b-lohlfufm3d] {
        padding: 15px;
        overflow-y: visible;
        flex-grow: 1;
    }

/* Clock styles */
.clocks-container[b-lohlfufm3d] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.clock-item[b-lohlfufm3d] {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    transition: transform 0.2s;
}

    .clock-item:hover[b-lohlfufm3d] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

.clock-location[b-lohlfufm3d] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.clock-time[b-lohlfufm3d] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 2px;
}

.clock-date[b-lohlfufm3d] {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Media query for mobile devices */
@media (max-width: 576px) {
    .clocks-container[b-lohlfufm3d] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Components/Dashboard/RiskWidget.razor.rz.scp.css */
/* RiskWidget.razor.css - Fixed */

.risk-widget[b-ow4pgs532w] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    transition: max-height 0.3s ease-in-out;
    max-height: 350px; /* Default height when collapsed */
    overflow: hidden;
}

    .risk-widget.expanded[b-ow4pgs532w] {
        max-height: 600px; /* Expanded height when showing details */
    }

    .risk-widget .card-body[b-ow4pgs532w] {
        padding: 0; /* Remove padding to accommodate custom header */
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Gray header with horizontal divider */
    .risk-widget .section-title-container[b-ow4pgs532w] {
        background-color: #f8f9fa;
        padding: 15px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        margin-bottom: 0;
        border-bottom: 1px solid #e9ecef; /* Horizontal divider */
    }

    .risk-widget .section-title[b-ow4pgs532w] {
        color: #6c757d;
        margin-bottom: 0;
    }

    .risk-widget .content-area[b-ow4pgs532w] {
        padding: 15px;
        overflow-y: auto; /* Scrollable content area */
        flex-grow: 1;
    }

/* Horizontal layout for risk summary */
.risk-summary[b-ow4pgs532w] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.risk-item[b-ow4pgs532w] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.risk-level[b-ow4pgs532w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

    .risk-level span.oi[b-ow4pgs532w] {
        margin-bottom: 5px;
    }

    .risk-level .level-text[b-ow4pgs532w] {
        text-align: center;
    }

.risk-count[b-ow4pgs532w] {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

/* Risk level colors */
.risk-level.critical[b-ow4pgs532w] {
    color: #dc3545;
}

.risk-level.high[b-ow4pgs532w] {
    color: #fd7e14;
}

.risk-level.medium[b-ow4pgs532w] {
    color: #ffc107;
}

/* Highlighted items when there are travelers */
.risk-item.has-travelers[b-ow4pgs532w] {
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

    .risk-item.has-travelers .risk-level.critical + .risk-count[b-ow4pgs532w] {
        color: #dc3545;
    }

    .risk-item.has-travelers .risk-level.high + .risk-count[b-ow4pgs532w] {
        color: #fd7e14;
    }

    .risk-item.has-travelers .risk-level.medium + .risk-count[b-ow4pgs532w] {
        color: #ffc107;
    }

/* Widget actions */
.widget-actions[b-ow4pgs532w] {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 15px;
    margin-bottom: 0;
}

/* Risk details section */
.risk-details-container[b-ow4pgs532w] {
    padding-top: 10px;
}

.details-header[b-ow4pgs532w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.details-title[b-ow4pgs532w] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0;
    text-transform: uppercase;
}

.details-controls[b-ow4pgs532w] {
    font-size: 0.8rem;
}

    .details-controls .form-check-input[b-ow4pgs532w] {
        cursor: pointer;
    }

    .details-controls label[b-ow4pgs532w] {
        cursor: pointer;
        user-select: none;
    }

.country-list-container[b-ow4pgs532w] {
    max-height: 250px;
    overflow-y: auto;
}

.country-list[b-ow4pgs532w] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.risk-group-header[b-ow4pgs532w] {
    font-weight: 700;
    padding: 8px 0;
    margin-top: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

    .risk-group-header.risk-critical[b-ow4pgs532w] {
        color: #dc3545;
        border-bottom-color: rgba(220, 53, 69, 0.3);
    }

    .risk-group-header.risk-high[b-ow4pgs532w] {
        color: #fd7e14;
        border-bottom-color: rgba(253, 126, 20, 0.3);
    }

    .risk-group-header.risk-medium[b-ow4pgs532w] {
        color: #ffc107;
        border-bottom-color: rgba(255, 193, 7, 0.3);
    }

    .risk-group-header.risk-low[b-ow4pgs532w] {
        color: #17a2b8;
        border-bottom-color: rgba(23, 162, 184, 0.3);
    }

.country-item[b-ow4pgs532w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5px 8px 20px; /* Add left padding for indentation */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

    .country-item:last-child[b-ow4pgs532w] {
        border-bottom: none;
    }

.country-name[b-ow4pgs532w] {
    font-weight: 500;
}

.traveler-count[b-ow4pgs532w] {
    font-weight: 700;
    font-size: 1.1rem;
}

/* No data message */
.no-data-message[b-ow4pgs532w] {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Loading state */
.risk-widget-loading[b-ow4pgs532w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

/* Custom scrollbar styling */
.content-area[b-ow4pgs532w]::-webkit-scrollbar,
.country-list-container[b-ow4pgs532w]::-webkit-scrollbar {
    width: 6px;
}

.content-area[b-ow4pgs532w]::-webkit-scrollbar-track,
.country-list-container[b-ow4pgs532w]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.content-area[b-ow4pgs532w]::-webkit-scrollbar-thumb,
.country-list-container[b-ow4pgs532w]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .content-area[b-ow4pgs532w]::-webkit-scrollbar-thumb:hover,
    .country-list-container[b-ow4pgs532w]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/* /Pages/Components/Dashboard/SafetyCheckInWidget.razor.rz.scp.css */
/* SafetyCheckWidget.razor.css - Match styles with RiskWidget */

.risk-widget[b-vk0gdnyiyh] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    transition: max-height 0.3s ease-in-out;
    max-height: 350px; /* Default height when collapsed */
    overflow: hidden;
}

    .risk-widget.expanded[b-vk0gdnyiyh] {
        max-height: none; /* Remove height limit when expanded */
    }

    .risk-widget .card-body[b-vk0gdnyiyh] {
        padding: 0; /* Remove padding to accommodate custom header */
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Gray header with horizontal divider */
    .risk-widget .section-title-container[b-vk0gdnyiyh] {
        background-color: #f8f9fa;
        padding: 15px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        margin-bottom: 0;
        border-bottom: 1px solid #e9ecef; /* Horizontal divider */
    }

    .risk-widget .section-title[b-vk0gdnyiyh] {
        color: #6c757d;
        margin-bottom: 0;
    }

    .risk-widget .content-area[b-vk0gdnyiyh] {
        padding: 15px;
        overflow-y: auto; /* Scrollable content area */
        flex-grow: 1;
    }

/* Safety status summary styling */
.safety-status-summary[b-vk0gdnyiyh] {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.status-item[b-vk0gdnyiyh] {
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    width: 45%;
}

.status-failed[b-vk0gdnyiyh] {
    background-color: #fff5f5;
}

.status-pending[b-vk0gdnyiyh] {
    background-color: #fff8e6; /* Yellowish color for pending */
}

.status-count[b-vk0gdnyiyh] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.status-failed .status-count[b-vk0gdnyiyh] {
    color: #dc3545;
}

.status-pending .status-count[b-vk0gdnyiyh] {
    color: #fd7e14;
}

.status-label[b-vk0gdnyiyh] {
    font-size: 0.9rem;
    color: #495057;
}

/* Widget actions */
.widget-actions[b-vk0gdnyiyh] {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 15px;
    margin-bottom: 0;
}

/* Risk details section */
.risk-details-container[b-vk0gdnyiyh] {
    padding-top: 10px;
}

.details-header[b-vk0gdnyiyh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.details-title[b-vk0gdnyiyh] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0;
    text-transform: uppercase;
}

.country-list-container[b-vk0gdnyiyh] {
    overflow-y: visible;
}

.country-list[b-vk0gdnyiyh] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.risk-group-header[b-vk0gdnyiyh] {
    font-weight: 700;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 4px 4px 0 0;
}

    .risk-group-header.risk-critical[b-vk0gdnyiyh] {
        background-color: #dc3545;
        color: white;
    }

    .risk-group-header.risk-high[b-vk0gdnyiyh] {
        background-color: #fd7e14;
        color: white;
    }

.country-item[b-vk0gdnyiyh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background-color: white;
}

    .country-item:last-child[b-vk0gdnyiyh] {
        border-bottom: none;
        border-radius: 0 0 4px 4px;
    }

.country-name[b-vk0gdnyiyh] {
    font-weight: 500;
}

/* No data message */
.no-data-message[b-vk0gdnyiyh] {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Loading state */
.risk-widget-loading[b-vk0gdnyiyh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

.loading-dots[b-vk0gdnyiyh] {
    display: flex;
    margin-bottom: 20px;
}

.dot[b-vk0gdnyiyh] {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #1890ff;
    animation: pulse-b-vk0gdnyiyh 1.5s infinite ease-in-out;
}

    .dot:nth-child(2)[b-vk0gdnyiyh] {
        animation-delay: 0.3s;
    }

    .dot:nth-child(3)[b-vk0gdnyiyh] {
        animation-delay: 0.6s;
    }

@keyframes pulse-b-vk0gdnyiyh {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Custom scrollbar styling */
.content-area[b-vk0gdnyiyh]::-webkit-scrollbar,
.country-list-container[b-vk0gdnyiyh]::-webkit-scrollbar {
    width: 6px;
}

.content-area[b-vk0gdnyiyh]::-webkit-scrollbar-track,
.country-list-container[b-vk0gdnyiyh]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.content-area[b-vk0gdnyiyh]::-webkit-scrollbar-thumb,
.country-list-container[b-vk0gdnyiyh]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .content-area[b-vk0gdnyiyh]::-webkit-scrollbar-thumb:hover,
    .country-list-container[b-vk0gdnyiyh]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/* /Pages/Components/Dashboard/SOSWidget.razor.rz.scp.css */
/* SOSWidget.razor.css - Updated header styling with conditional colors */
.sos-widget[b-pjs190pcf2] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    max-height: 350px; /* Fixed maximum height */
}

    .sos-widget .card-body[b-pjs190pcf2] {
        padding: 0; /* Remove padding to accommodate custom header */
        max-height: 350px;
    }

    /* Default header styling (no active SOS) */
    .sos-widget .section-title-container[b-pjs190pcf2] {
        background-color: #ffebee; /* Pale red when no alerts */
        padding: 15px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        margin-bottom: 0;
        border-bottom: 1px solid #e9ecef; /* Horizontal divider */
        transition: background-color 0.3s ease; /* Smooth transition for color changes */
    }

    .sos-widget .sos-title[b-pjs190pcf2] {
        color: #555555; /* Darker text for better contrast on light background */
        margin-bottom: 0;
    }

    .sos-widget .section-title .oi-warning[b-pjs190pcf2] {
        color: #555555; /* Icon color matches text */
    }

/* Active SOS alert styling */
.sos-active .section-title-container[b-pjs190pcf2] {
    background-color: #dc3545; /* Bright red for active alerts */
}

.sos-active .sos-title[b-pjs190pcf2] {
    color: white; /* White text on red background */
}

.sos-active .section-title .oi-warning[b-pjs190pcf2] {
    color: white; /* White icon on red background */
}

.sos-widget .content-area[b-pjs190pcf2] {
    padding: 15px;
    max-height: 290px; /* Adjust to account for header */
    overflow-y: auto; /* Scrollable content area only */
}

.sos-empty-state[b-pjs190pcf2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    color: #6c757d;
}

    .sos-empty-state .oi-check-circle[b-pjs190pcf2] {
        font-size: 2rem;
        margin-bottom: 10px;
    }

.sos-list[b-pjs190pcf2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sos-item[b-pjs190pcf2] {
    background-color: #fff8f8;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.1);
}

.sos-header[b-pjs190pcf2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.sos-name[b-pjs190pcf2] {
    font-weight: 600;
    font-size: 1rem;
    color: #212529;
}

.sos-time[b-pjs190pcf2] {
    font-size: 0.85rem;
    color: #dc3545;
    font-weight: 500;
}

.sos-location[b-pjs190pcf2] {
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.sos-actions[b-pjs190pcf2] {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* Loading state */
.sos-widget-loading[b-pjs190pcf2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

/* Badge styling */
.badge.bg-danger[b-pjs190pcf2] {
    background-color: white !important;
    color: #dc3545;
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
}

/* Custom scrollbar styling for better appearance */
.content-area[b-pjs190pcf2]::-webkit-scrollbar {
    width: 6px;
}

.content-area[b-pjs190pcf2]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.content-area[b-pjs190pcf2]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

    .content-area[b-pjs190pcf2]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/* /Pages/Dashboard.razor.rz.scp.css */
/* Dashboard.razor.css - Updated for three-column layout */

/* Dashboard container */
.dashboard-container[b-p2bp0itsh4] {
    padding: 16px;
    overflow-y: auto; /* Enable scrolling for the entire dashboard */
}

/* Dashboard grid layout */
.dashboard-grid[b-p2bp0itsh4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Dashboard header */
.dashboard-header[b-p2bp0itsh4] {
    margin-bottom: 16px;
}

    .dashboard-header h1[b-p2bp0itsh4] {
        font-size: 1.4rem;
        margin-bottom: 0.25rem;
    }

    .dashboard-header p[b-p2bp0itsh4] {
        margin-bottom: 0;
    }

/* Section title */
.section-title[b-p2bp0itsh4] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #495057;
}

/* Stats cards */
.stats-card[b-p2bp0itsh4] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

    .stats-card:hover[b-p2bp0itsh4] {
        transform: translateY(-3px);
    }

    .stats-card .card-title[b-p2bp0itsh4] {
        font-size: 0.9rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
    }

    .stats-card .value[b-p2bp0itsh4] {
        font-size: 1.8rem;
        font-weight: 700;
    }

/* Feature cards */
.feature-card[b-p2bp0itsh4] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
    height: 180px; /* Reduced height for compactness */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

    .feature-card:hover[b-p2bp0itsh4] {
        transform: translateY(-3px);
    }

/* Card styling */
.card[b-p2bp0itsh4] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px; /* Reduced margin for compactness */
}

/* Map card styling */
.
.map-card[b-p2bp0itsh4] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    height: 130px;
    background-image: url('/Images/map.png');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}


/* Loading container */
.loading-container[b-p2bp0itsh4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
}

/* Loading dots */
.loading-dots[b-p2bp0itsh4] {
    display: flex;
    margin-bottom: 20px;
}

.dot[b-p2bp0itsh4] {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #1890ff;
    animation: pulse-b-p2bp0itsh4 1.5s infinite ease-in-out;
}

    .dot:nth-child(2)[b-p2bp0itsh4] {
        animation-delay: 0.3s;
    }

    .dot:nth-child(3)[b-p2bp0itsh4] {
        animation-delay: 0.6s;
    }

@keyframes pulse-b-p2bp0itsh4 {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Set minimum height for the page to ensure scrolling */
[b-p2bp0itsh4] .page {
    min-height: 100vh;
}

/* Error boundary styling */
.error-container[b-p2bp0itsh4] {
    max-width: 500px;
    margin: 60px auto;
    text-align: center;
    background-color: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .dashboard-grid[b-p2bp0itsh4] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .dashboard-grid[b-p2bp0itsh4] {
        grid-template-columns: 1fr;
    }
}

/* Custom scrollbar styling */
[b-p2bp0itsh4]::-webkit-scrollbar {
    width: 8px;
}

[b-p2bp0itsh4]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

[b-p2bp0itsh4]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    [b-p2bp0itsh4]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
/* /Pages/GeofenceManagerComponent.razor.rz.scp.css */
/* Geofence Manager Component Styles */

/* Main container */
.geofence-manager[b-0twoe11qcv] {
    position: absolute;
    width: 320px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transition: width 0.3s, height 0.3s;
    max-height: 80vh; /* Limit to 80% of viewport height */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow at the container level */
}

    .geofence-manager.collapsed[b-0twoe11qcv] {
        height: 48px;
    }

    .geofence-manager.expanded[b-0twoe11qcv] {
        height: auto;
        max-height: calc(100vh - 160px);
        display: flex;
        flex-direction: column;
    }

.manager-header[b-0twoe11qcv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #3B82F6;
    color: white;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0; /* Prevent header from shrinking */
}

    .manager-header h3[b-0twoe11qcv] {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
    }


.manager-content[b-0twoe11qcv] {
    display: flex;
    flex-direction: column;
    height: calc(80vh - 48px);
    padding: 16px;
    overflow: hidden; /* No scrolling for the content container */
}

/* Create section */
.create-section-header[b-0twoe11qcv] {
    flex-shrink: 0;
    margin-bottom: 12px;
}

.section-header-content[b-0twoe11qcv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f9ff;
    padding: 8px 12px;
    border-radius: 6px;
}

    .section-header-content h3[b-0twoe11qcv] {
        margin: 0;
        font-size: 14px;
        color: #3B82F6;
    }

.create-section[b-0twoe11qcv] {
    flex-shrink: 0;
    transition: max-height 0.3s, opacity 0.3s;
    overflow: hidden;
}

    .create-section.collapsed[b-0twoe11qcv] {
        max-height: 0;
        opacity: 0;
    }

    .create-section.expanded[b-0twoe11qcv] {
        max-height: 550px; /* Increased from 410px to accommodate more rules */
        overflow-y: visible; /* Allow content to be visible even if it exceeds max-height */
    }

.create-content[b-0twoe11qcv] {
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 10px;
}

.input-row[b-0twoe11qcv] {
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
}

    .input-row input[b-0twoe11qcv], .input-row select[b-0twoe11qcv] {
        padding: 8px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        font-size: 14px;
    }

    .input-row input[b-0twoe11qcv] {
        flex: 1;
    }

    .input-row.radius-row input[type="number"][b-0twoe11qcv] {
        width: 120px;
    }

/* Rules section */
.rules-section[b-0twoe11qcv] {
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
    margin-bottom: 16px;
    max-height: none; /* Remove any height constraints */
}

    .rules-section h5[b-0twoe11qcv] {
        margin-top: 0;
        margin-bottom: 12px;
        font-size: 14px;
        color: #4b5563;
    }

.rule-item[b-0twoe11qcv] {
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

    .rule-item input[type="text"][b-0twoe11qcv] {
        padding: 8px 12px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        font-size: 14px;
        width: 100%;
        margin-bottom: 10px;
        box-sizing: border-box; /* Ensure padding is included in width */
    }


.rule-options[b-0twoe11qcv] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}


.rule-enabled[b-0twoe11qcv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-left: auto;
    margin-right: 10px;
    white-space: nowrap; /* Prevent text wrapping */
}

    .rule-enabled input[type="checkbox"][b-0twoe11qcv] {
        width: 16px;
        height: 16px;
        margin: 0;
        padding: 0;
        visibility: visible; /* Explicitly make visible */
        opacity: 1;
    }

    .rule-enabled label[b-0twoe11qcv] {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

.rule-options select[b-0twoe11qcv] {
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
    min-width: 100px;
    height: 38px;
    flex-shrink: 0; /* Prevent the select from shrinking */
}

.btn-remove-rule[b-0twoe11qcv] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 4px;
    flex-shrink: 0; /* Prevent the button from shrinking */
    display: flex; /* Ensure the content is centered */
    align-items: center;
    justify-content: center;
}

    .btn-remove-rule:hover[b-0twoe11qcv] {
        background-color: #fee2e2; /* Light red background on hover */
    }

.btn-add-rule[b-0twoe11qcv] {
    background-color: #f3f4f6;
    border: 1px dashed #9ca3af;
    color: #4b5563;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 16px;
}

    .btn-add-rule:hover[b-0twoe11qcv] {
        background-color: #e5e7eb;
    }

.buttons-row[b-0twoe11qcv] {
    position: relative; /* Remove sticky positioning */
    background-color: white;
    padding: 10px 0;
    margin-top: 10px;
    z-index: 2;
}

.btn-create[b-0twoe11qcv], .btn-cancel[b-0twoe11qcv] {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.btn-create[b-0twoe11qcv] {
    background-color: #3B82F6;
    color: white;
    flex: 1;
}

.btn-cancel[b-0twoe11qcv] {
    background-color: #f3f4f6;
    color: #4b5563;
}

.creation-instructions[b-0twoe11qcv] {
    font-size: 12px;
    color: #6b7280;
    margin-top: 12px;
    padding: 8px;
    background-color: #FFFBEB;
    border-left: 3px solid #FBBF24;
    border-radius: 0 4px 4px 0;
}

/* Active geofences list - Make only this section scrollable */
.active-geofences[b-0twoe11qcv] {
    margin-top: 16px;
    flex: 1; /* Take remaining space */
    overflow-y: auto; /* This is the ONLY section that scrolls */
    padding-right: 4px; /* Add padding for scrollbar */
    max-height: none; /* Remove max-height constraint */
}

    .active-geofences h4[b-0twoe11qcv] {
        font-size: 14px; /* Keep the same size as other section headers */
        color: #111827;
        margin-top: 0;
        margin-bottom: 12px;
    }

.empty-message[b-0twoe11qcv] {
    padding: 12px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    background-color: #f9fafb;
    border-radius: 4px;
}

.geofence-list[b-0twoe11qcv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Updated geofence item with horizontal actions */
.geofence-item[b-0twoe11qcv] {
    display: flex;
    flex-direction: column;
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 12px;
    border-left: 3px solid #3B82F6;
}

.geofence-info[b-0twoe11qcv] {
    flex: 1;
}

.geofence-name[b-0twoe11qcv] {
    font-weight: 500;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 4px;
}

.geofence-details[b-0twoe11qcv] {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.geofence-shape[b-0twoe11qcv] {
    background-color: #e5e7eb;
    border-radius: 4px;
    padding: 2px 6px;
}

.geofence-rules[b-0twoe11qcv] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 12px;
}

    .geofence-rules strong[b-0twoe11qcv] {
        margin-right: 4px;
    }

.rule-tag[b-0twoe11qcv] {
    background-color: #e5e7eb;
    border-radius: 4px;
    padding: 2px 6px;
    color: #4b5563;
}

    .rule-tag.enabled[b-0twoe11qcv] {
        background-color: #dcfce7;
        color: #166534;
    }

    .rule-tag.disabled[b-0twoe11qcv] {
        background-color: #fee2e2;
        color: #991b1b;
    }

/* Horizontal action bar */
.geofence-actions[b-0twoe11qcv] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    border-top: 1px solid #e5e7eb;
    padding-top: 8px;
}

.btn-center[b-0twoe11qcv], .btn-view[b-0twoe11qcv], .btn-delete[b-0twoe11qcv], .btn-toggle[b-0twoe11qcv] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

    .btn-center:hover[b-0twoe11qcv], .btn-view:hover[b-0twoe11qcv], .btn-delete:hover[b-0twoe11qcv], .btn-toggle:hover[b-0twoe11qcv] {
        background-color: #f0f0f0;
    }

.btn-delete[b-0twoe11qcv] {
    color: #ef4444;
}

/* Alert notifications */
.geofence-alerts[b-0twoe11qcv] {
    margin-top: 16px;
    flex-shrink: 0;
    max-height: 160px;
    overflow: hidden;
}

    .geofence-alerts h4[b-0twoe11qcv] {
        font-size: 14px;
        color: #111827;
        margin-bottom: 12px;
    }

.alert-list[b-0twoe11qcv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-item[b-0twoe11qcv] {
    display: flex;
    justify-content: space-between;
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 12px;
}

    .alert-item.exclusion-alert[b-0twoe11qcv] {
        border-left: 3px solid #ef4444;
    }

    .alert-item.inclusion-alert[b-0twoe11qcv] {
        border-left: 3px solid #f97316;
    }

.alert-info[b-0twoe11qcv] {
    flex: 1;
}

.alert-title[b-0twoe11qcv] {
    font-weight: 500;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 4px;
}

.alert-details[b-0twoe11qcv] {
    font-size: 12px;
    color: #6b7280;
}

.violation-type[b-0twoe11qcv], .geofence-name[b-0twoe11qcv] {
    margin-right: 8px;
}

.alert-time[b-0twoe11qcv] {
    font-size: 11px;
    color: #9ca3af;
}

.btn-locate[b-0twoe11qcv] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    align-self: center;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

    .btn-locate:hover[b-0twoe11qcv] {
        background-color: #f0f0f0;
    }

/* Details modal - no scrolling */
.geofence-details-modal[b-0twoe11qcv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

.modal-content[b-0twoe11qcv] {
    background-color: white;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header[b-0twoe11qcv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0; /* Prevent header from shrinking */
}

    .modal-header h3[b-0twoe11qcv] {
        margin: 0;
        font-size: 18px;
        color: #111827;
    }

.close-button[b-0twoe11qcv] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6b7280;
}

.modal-body[b-0twoe11qcv] {
    padding: 16px;
    overflow-y: auto; /* Only the modal body should scroll if needed */
}

.detail-row[b-0twoe11qcv] {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

    .detail-row label[b-0twoe11qcv] {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
    }

    .detail-row span[b-0twoe11qcv] {
        font-size: 14px;
        color: #111827;
    }

.rules-list[b-0twoe11qcv] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-detail[b-0twoe11qcv] {
    background-color: #f9fafb;
    border-radius: 6px;
    padding: 12px;
    font-size: 14px;
}

    .rule-detail.enabled[b-0twoe11qcv] {
        border-left: 3px solid #22c55e;
    }

    .rule-detail.disabled[b-0twoe11qcv] {
        border-left: 3px solid #ef4444;
        opacity: 0.7;
    }

.rule-toggle[b-0twoe11qcv] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Notification */
.geofence-notification[b-0twoe11qcv] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #3B82F6;
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 1100;
    animation: fadeIn-b-0twoe11qcv 0.3s, fadeOut-b-0twoe11qcv 0.3s 2.7s;
}

@keyframes fadeIn-b-0twoe11qcv {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut-b-0twoe11qcv {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Disabled geofence styling */
.disabled-geofence[b-0twoe11qcv] {
    opacity: 0.7;
    background-color: #f5f5f5;
    border-left: 3px solid #9e9e9e !important;
}

/* Enabled/Disabled status indicators */
.geofence-status[b-0twoe11qcv] {
    font-size: 0.8rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

    .geofence-status.disabled[b-0twoe11qcv] {
        background-color: #fce8e6;
        color: #c5221f;
    }

    .geofence-status.enabled[b-0twoe11qcv] {
        background-color: #e6f4ea;
        color: #137333;
    }

/* Toggle button in the geofence details modal */
.enabled-toggle[b-0twoe11qcv] {
    margin-bottom: 16px;
    padding: 8px;
    background-color: #f5f7fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.toggle-switch[b-0twoe11qcv] {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
}

    .toggle-switch input[b-0twoe11qcv] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-switch label[b-0twoe11qcv] {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
        font-size: 12px;
        color: white;
    }

        .toggle-switch label.disabled[b-0twoe11qcv] {
            background-color: #F44336;
        }

        .toggle-switch label.enabled[b-0twoe11qcv] {
            background-color: #4CAF50;
        }

        .toggle-switch label[b-0twoe11qcv]:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        .toggle-switch label.enabled[b-0twoe11qcv]:after {
            content: "Yes";
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
        }

        .toggle-switch label.disabled[b-0twoe11qcv]:after {
            content: "No";
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
        }

    .toggle-switch input:checked + label[b-0twoe11qcv]:before {
        transform: translateX(36px);
    }

/* Styles for affected people count badges */
.violation-count[b-0twoe11qcv], .affected-count[b-0twoe11qcv] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 6px;
}

.violation-count[b-0twoe11qcv] {
    background-color: rgba(254, 202, 202, 0.7);
    color: #b91c1c;
}

.affected-count[b-0twoe11qcv] {
    background-color: rgba(219, 234, 254, 0.7);
    color: #1e40af;
}

/* Affected people list styling */
.affected-people-list[b-0twoe11qcv] {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

.affected-person-item[b-0twoe11qcv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .affected-person-item:last-child[b-0twoe11qcv] {
        border-bottom: none;
    }

    .affected-person-item.violating[b-0twoe11qcv] {
        background-color: rgba(254, 202, 202, 0.5); /* Light red background */
    }

.person-info[b-0twoe11qcv] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.person-name[b-0twoe11qcv] {
    font-weight: 500;
    color: #334155;
}

.person-status[b-0twoe11qcv] {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}

.violation-badge[b-0twoe11qcv] {
    color: #dc2626; /* Red color */
    font-size: 0.8rem;
    margin-top: 2px;
}

.count-badge[b-0twoe11qcv] {
    background-color: #3b82f6;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
}

.no-people-message[b-0twoe11qcv] {
    padding: 12px;
    color: #64748b;
    font-style: italic;
    text-align: center;
    background-color: #f8fafc;
    border-radius: 4px;
    margin-top: 8px;
}

.inside-count[b-0twoe11qcv], .outside-count[b-0twoe11qcv] {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 6px;
}

.inside-count[b-0twoe11qcv] {
    background-color: rgba(219, 234, 254, 0.7); /* Light blue background */
    color: #1e40af; /* Dark blue text */
}   

.outside-count[b-0twoe11qcv] {
    background-color: rgba(254, 226, 226, 0.7); /* Light red background */
    color: #b91c1c; /* Dark red text */
}

/* People list styling */
.people-list[b-0twoe11qcv] {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

.person-item[b-0twoe11qcv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .person-item:last-child[b-0twoe11qcv] {
        border-bottom: none;
    }


.toggle-button[b-0twoe11qcv] {
    background: none;
    border: none;
    padding: 5px;
    margin: 0;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .toggle-button:hover[b-0twoe11qcv] {
        background-color: rgba(255, 255, 255, 0.2); /* Light background on hover */
    }

.toggle-icon-container[b-0twoe11qcv] {
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    .toggle-icon-container:hover[b-0twoe11qcv] {
        background-color: rgba(59, 130, 246, 0.1);
    }

.toggle-icon[b-0twoe11qcv] {
    font-size: 14px;
    pointer-events: none; /* This prevents the span from receiving click events */
}





.btn-edit[b-0twoe11qcv] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

    .btn-edit:hover[b-0twoe11qcv] {
        background-color: #f0f0f0;
    }

.icon-edit[b-0twoe11qcv] {
    color: #3B82F6; /* Blue color for edit */
}

/* Additional styles for edit mode */
.edit-label[b-0twoe11qcv] {
    font-weight: 500;
    font-size: 14px;
    color: #4b5563;
    margin-right: 12px;
}

.edit-note[b-0twoe11qcv] {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    margin-left: 8px;
}

/* Highlight the form when in edit mode */
.create-content.edit-mode[b-0twoe11qcv] {
    border-left: 3px solid #FF9800; /* Orange border to indicate edit mode */
}

/* Style for the edit mode header */
.create-section-header h3.edit-mode[b-0twoe11qcv] {
    color: #FF9800; /* Orange text for edit mode */
}

/* Make the disabled input fields look different */
.input-row input:disabled[b-0twoe11qcv],
.input-row select:disabled[b-0twoe11qcv] {
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px dashed #d1d5db;
}

/* Enhance the save changes button */
.btn-create.edit-mode[b-0twoe11qcv] {
    background-color: #FF9800; /* Orange for edit mode */
}

    .btn-create.edit-mode:hover[b-0twoe11qcv] {
        background-color: #F57C00; /* Darker orange on hover */
    }

/* Add a visual cue for the geofence being edited */
.geofence-item.editing[b-0twoe11qcv] {
    box-shadow: 0 0 0 2px #FF9800; /* Orange highlight */
    transform: scale(1.01);
    transition: all 0.3s ease;
}
/* /Pages/MapBoundsListingComponent.razor.rz.scp.css */
.map-bounds-listing[b-kaxedxfmom] {
    position: absolute;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: hidden;
    width: 300px;
    max-height: calc(100vh - 200px);
}

    .map-bounds-listing.people-listing[b-kaxedxfmom] {
        top: 70px;
        right: 10px;
    }

    .map-bounds-listing.alerts-listing[b-kaxedxfmom] {
        top: 70px;
        left: 10px;
    }

    .map-bounds-listing.collapsed[b-kaxedxfmom] {
        height: 48px;
    }

    .map-bounds-listing.expanded[b-kaxedxfmom] {
        height: auto;
    }

.listing-header[b-kaxedxfmom] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f5f5f5;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}

    .listing-header h3[b-kaxedxfmom] {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
    }

.toggle-icon[b-kaxedxfmom] {
    font-size: 12px;
    color: #555;
}

.listing-content[b-kaxedxfmom] {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 250px);
}

.filter-options[b-kaxedxfmom] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.filter-dropdown select[b-kaxedxfmom] {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

.search-box input[b-kaxedxfmom] {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 160px;
}

.listing-items[b-kaxedxfmom] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.listing-item[b-kaxedxfmom] {
    display: flex;
    padding: 12px;
    border-radius: 6px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .listing-item:hover[b-kaxedxfmom] {
        background-color: #f0f0f0;
    }

.item-icon[b-kaxedxfmom] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.item-details[b-kaxedxfmom] {
    flex: 1;
    min-width: 0; /* Important for text truncation to work */
}

.item-name[b-kaxedxfmom] {
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-description[b-kaxedxfmom] {
    font-size: 14px;
    color: #555;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-meta[b-kaxedxfmom] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #777;
}

/* Status classes for people */
.status-normal .item-icon[b-kaxedxfmom] {
    background-color: #4CAF50;
    color: white;
}

.status-stale .item-icon[b-kaxedxfmom] {
    background-color: #FFC107;
    color: white;
}

.status-sos .item-icon[b-kaxedxfmom] {
    background-color: #F44336;
    color: white;
    animation: pulse-b-kaxedxfmom 1.5s infinite;
}

/* Severity classes for alerts */
.severity-low[b-kaxedxfmom] {
    border-left: 4px solid #4CAF50;
}

.severity-medium[b-kaxedxfmom] {
    border-left: 4px solid #FFC107;
}

.severity-high[b-kaxedxfmom] {
    border-left: 4px solid #FF9800;
}

.severity-critical[b-kaxedxfmom] {
    border-left: 4px solid #F44336;
}

.severity-unknown[b-kaxedxfmom] {
    border-left: 4px solid #9E9E9E;
}

.listing-empty[b-kaxedxfmom] {
    text-align: center;
    padding: 24px 0;
    color: #777;
}

/* Icon placeholders - replace with actual icons in your project */
.icon-person[b-kaxedxfmom]::before {
    content: "👤";
}

.icon-alert[b-kaxedxfmom]::before {
    content: "⚠️";
}

@keyframes pulse-b-kaxedxfmom {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* Make component responsive on smaller screens */
@media (max-width: 768px) {
    .map-bounds-listing[b-kaxedxfmom] {
        width: calc(100% - 20px);
        max-width: none;
    }

        .map-bounds-listing.people-listing[b-kaxedxfmom],
        .map-bounds-listing.alerts-listing[b-kaxedxfmom] {
            top: auto;
            left: 10px;
            right: 10px;
        }

        .map-bounds-listing.people-listing[b-kaxedxfmom] {
            bottom: 140px;
        }

        .map-bounds-listing.alerts-listing[b-kaxedxfmom] {
            bottom: 70px;
        }
}
/* /Pages/SidePanel.razor.rz.scp.css */
/* Add these styles to your existing style section in the SidePanel component */

.status-card[b-snrdzhbzjp] {
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-ok[b-snrdzhbzjp] {
    background-color: #e6f7e9;
    border-left: 4px solid #22c55e;
}

.status-attention[b-snrdzhbzjp] {
    background-color: #fef9c3;
    border-left: 4px solid #facc15;
}

.status-late[b-snrdzhbzjp] {
    background-color: #fee2e2;
    border-left: 4px solid #ef4444;
}

.time-remaining[b-snrdzhbzjp] {
    font-size: 12px;
    font-style: italic;
    color: #666;
    margin-left: 5px;
}

.check-in-history[b-snrdzhbzjp] {
    margin-top: 15px;
}

.history-title[b-snrdzhbzjp] {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.history-list[b-snrdzhbzjp] {
    max-height: 150px;
    overflow-y: auto;
    border-radius: 4px;
    background-color: #f9f9f9;
    padding: 8px;
}

.history-item[b-snrdzhbzjp] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #e0e0e0;
}

    .history-item:last-child[b-snrdzhbzjp] {
        border-bottom: none;
    }

.history-date[b-snrdzhbzjp] {
    font-weight: 500;
}

.view-all-button[b-snrdzhbzjp] {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
}

    .view-all-button:hover[b-snrdzhbzjp] {
        background-color: #e5e7eb;
    }



.detail-multi-value[b-snrdzhbzjp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-contact-item[b-snrdzhbzjp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .detail-contact-item a[b-snrdzhbzjp] {
        color: #0078d7;
        text-decoration: none;
    }

        .detail-contact-item a:hover[b-snrdzhbzjp] {
            text-decoration: underline;
        }

.phone-type[b-snrdzhbzjp] {
    color: #666;
    font-size: 0.85em;
}

.loading-contact[b-snrdzhbzjp] {
    font-style: italic;
    color: #666;
    padding: 8px 0;
}
/* /Pages/TravelMap.razor.rz.scp.css */
/* Connection status indicators */
.connection-status-container[b-xz6xaeu5hq] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    position: absolute;
    top: 10px;
    right: 20px;
}

.connection-status[b-xz6xaeu5hq] {
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    display: flex;
    gap: 4px;
    align-items: center;
}

    .connection-status .indicator[b-xz6xaeu5hq] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }

    .connection-status.connected[b-xz6xaeu5hq] {
        background-color: rgba(76, 175, 80, 0.8);
        color: white;
    }

        .connection-status.connected .indicator[b-xz6xaeu5hq] {
            background-color: #fff;
        }

    .connection-status.disconnected[b-xz6xaeu5hq] {
        background-color: rgba(244, 67, 54, 0.8);
        color: white;
    }

        .connection-status.disconnected .indicator[b-xz6xaeu5hq] {
            background-color: #fff;
        }

/* Chat notification button */
.chat-notification[b-xz6xaeu5hq] {
    position: relative;
}

.notification-badge[b-xz6xaeu5hq] {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff4081;
    color: white;
    border-radius: 50%;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0 4px;
}

/* Chat notifications popup */
.chat-notifications-popup[b-xz6xaeu5hq] {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 300px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.popup-header[b-xz6xaeu5hq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

    .popup-header h3[b-xz6xaeu5hq] {
        margin: 0;
        font-size: 1rem;
    }

.close-button[b-xz6xaeu5hq] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
}

.notifications-list[b-xz6xaeu5hq] {
    max-height: 300px;
    overflow-y: auto;
}

.notification-item[b-xz6xaeu5hq] {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .notification-item:hover[b-xz6xaeu5hq] {
        background-color: #f5f5f5;
    }

.person-name[b-xz6xaeu5hq] {
    font-weight: 500;
}

.message-count[b-xz6xaeu5hq] {
    font-size: 0.8rem;
    color: #666;
}

/* Alert notification button */
.alert-notification[b-xz6xaeu5hq] {
    position: relative;
}

/* Alert notifications popup */
.alert-notifications-popup[b-xz6xaeu5hq] {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 300px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.alert-name[b-xz6xaeu5hq] {
    font-weight: 500;
}

.alert-description[b-xz6xaeu5hq] {
    font-size: 0.8rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button-with-indicator[b-xz6xaeu5hq] {
    position: relative;
    display: inline-block;
}

.alert-count-indicator[b-xz6xaeu5hq] {
    position: absolute;
    top: -5px;
    right: -5px;
    cursor: pointer;
}

/* SOS Button Styles */
.sos-button[b-xz6xaeu5hq] {
    position: relative;
    background-color: #ffebee; /* Light red background */
    border: 1px solid #f44336; /* Red border */
    animation: pulse-b-xz6xaeu5hq 2s infinite; /* Pulsing animation for urgency */
}

.sos-badge[b-xz6xaeu5hq] {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #f44336;
    color: white;
    border-radius: 50%;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0 4px;
}

@keyframes pulse-b-xz6xaeu5hq {
    0% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}

/* Make sure the notification badge on SOS button is positioned correctly */
.sos-button .notification-badge[b-xz6xaeu5hq] {
    position: absolute;
    top: -5px;
    right: -5px;
}

.notification-badge.sos[b-xz6xaeu5hq] {
    background-color: #f44336; /* Red for SOS */
}

/* SOS notifications popup */
.sos-notifications-popup[b-xz6xaeu5hq] {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 300px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
}

.sos-timestamp[b-xz6xaeu5hq] {
    font-size: 0.8rem;
    color: #f44336;
    font-weight: bold;
}

.icon-button:disabled[b-xz6xaeu5hq] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.geofence-manager-container[b-xz6xaeu5hq] {
    position: absolute;
    z-index: 100;
    pointer-events: auto;
}

.custom-info-window[b-xz6xaeu5hq] {
    padding: 12px;
    max-width: 350px;
    font-family: Arial, sans-serif;
}

    .custom-info-window h3[b-xz6xaeu5hq] {
        margin-top: 0;
        margin-bottom: 8px;
        color: #333;
        font-size: 16px;
    }

    .custom-info-window .metadata-item[b-xz6xaeu5hq] {
        margin-bottom: 8px;
        font-size: 13px;
    }

    .custom-info-window .label[b-xz6xaeu5hq] {
        font-weight: 500;
        color: #666;
    }

    .custom-info-window .value[b-xz6xaeu5hq] {
        font-weight: 500;
        color: #333;
    }

        .custom-info-window .value.status-sos[b-xz6xaeu5hq] {
            color: #dc3545;
            font-weight: 700;
        }

    .custom-info-window .view-details-button[b-xz6xaeu5hq] {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        margin-top: 10px;
        display: block;
        width: 100%;
        text-align: center;
    }

        .custom-info-window .view-details-button:hover[b-xz6xaeu5hq] {
            background-color: #0069d9;
        }
/* /Pages/TripDetailsPanel.razor.rz.scp.css */
.loading-indicator[b-1pd92yy3v9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    width: 100%;
    min-height: 200px; /* Ensure enough height to see the animation */
}

.loading-indicator-dots[b-1pd92yy3v9] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.loading-dot[b-1pd92yy3v9] {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #1976d2;
    border-radius: 50%;
}

    .loading-dot:nth-child(1)[b-1pd92yy3v9] {
        animation: loading-bounce-b-1pd92yy3v9 1.4s ease-in-out 0s infinite both;
    }

    .loading-dot:nth-child(2)[b-1pd92yy3v9] {
        animation: loading-bounce-b-1pd92yy3v9 1.4s ease-in-out 0.2s infinite both;
    }

    .loading-dot:nth-child(3)[b-1pd92yy3v9] {
        animation: loading-bounce-b-1pd92yy3v9 1.4s ease-in-out 0.4s infinite both;
    }

@keyframes loading-bounce-b-1pd92yy3v9 {
    0%, 100% {
        transform: scale(0.5);
        opacity: 0.5;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}



/* Trip Details Panel */
.trip-details-panel[b-1pd92yy3v9] {
    padding: 12px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Loading animation - directly copied from AlertWidget */
.alert-widget-loading[b-1pd92yy3v9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}

.loading-dots[b-1pd92yy3v9] {
    display: flex;
}

.dot[b-1pd92yy3v9] {
    width: 6px;
    height: 6px;
    background: #9c27b0;
    border-radius: 50%;
    margin: 0 3px;
    animation: pulse-b-1pd92yy3v9 1.5s infinite ease-in-out;
}

    .dot:nth-child(2)[b-1pd92yy3v9] {
        animation-delay: 0.2s;
    }

    .dot:nth-child(3)[b-1pd92yy3v9] {
        animation-delay: 0.4s;
    }

@keyframes pulse-b-1pd92yy3v9 {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Trip Header with back button */
.trip-header[b-1pd92yy3v9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e1;
}

.trip-header-content[b-1pd92yy3v9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.back-button[b-1pd92yy3v9] {
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f0f0f0;
}

    .back-button:hover[b-1pd92yy3v9] {
        background-color: #e0e0e0;
    }

.trip-header h3[b-1pd92yy3v9] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

/* Trip status - fixed to ensure proper display with hyphenated class names */
.trip-status[b-1pd92yy3v9] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    margin-left: 10px;
    white-space: nowrap;
    line-height: 1.2;
    vertical-align: middle;
    height: auto;
    box-sizing: border-box;
}

    /* Handle hyphenated status classes */
    .trip-status.in-progress[b-1pd92yy3v9] {
        background-color: #e3f2fd;
        color: #1976d2;
    }

    .trip-status.not-started[b-1pd92yy3v9] {
        background-color: #e8f5e9;
        color: #388e3c;
    }

    .trip-status.completed[b-1pd92yy3v9] {
        background-color: #eeeeee;
        color: #616161;
    }

/* Trip Summary */
.trip-summary[b-1pd92yy3v9] {
    background-color: #f9f9f9;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.trip-dates-locations[b-1pd92yy3v9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trip-point[b-1pd92yy3v9] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.trip-date[b-1pd92yy3v9] {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

.trip-location[b-1pd92yy3v9] {
    font-size: 13px;
    color: #666;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-arrow[b-1pd92yy3v9] {
    padding: 0 10px;
    color: #999;
    font-size: 16px;
}

.trip-duration[b-1pd92yy3v9] {
    text-align: right;
    font-size: 13px;
    color: #666;
    margin-top: 10px;
}

/* Trip Timeline */
.trip-timeline[b-1pd92yy3v9] {
    margin-bottom: 20px;
}

    .trip-timeline h4[b-1pd92yy3v9] {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 16px;
        font-weight: 600;
    }

.timeline[b-1pd92yy3v9] {
    position: relative;
    margin-left: 20px;
}

    .timeline[b-1pd92yy3v9]:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        background-color: #e0e0e0;
    }

.timeline-item[b-1pd92yy3v9] {
    position: relative;
    padding-left: 30px;
    padding-bottom: 20px;
}

    .timeline-item:last-child[b-1pd92yy3v9] {
        padding-bottom: 0;
    }

.timeline-icon[b-1pd92yy3v9] {
    position: absolute;
    left: -11px;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 10px;
    z-index: 1;
}

    .timeline-icon.tripleg[b-1pd92yy3v9] {
        border-color: #2196f3;
        color: #2196f3;
    }

    .timeline-icon.tripaccommodation[b-1pd92yy3v9] {
        border-color: #ff9800;
        color: #ff9800;
    }

    .timeline-icon.tripactivity[b-1pd92yy3v9] {
        border-color: #4caf50;
        color: #4caf50;
    }

    .timeline-icon.tripvehicle[b-1pd92yy3v9] {
        border-color: #9c27b0;
        color: #9c27b0;
    }

.timeline-content[b-1pd92yy3v9] {
    background-color: #fff;
    padding: 12px 15px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.timeline-date[b-1pd92yy3v9] {
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}

.timeline-title[b-1pd92yy3v9] {
    font-weight: 500;
    margin-bottom: 10px;
}

.timeline-details[b-1pd92yy3v9] {
    font-size: 13px;
    color: #666;
}

/* Compact leg details */
.compact-leg-details[b-1pd92yy3v9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.leg-departure[b-1pd92yy3v9], .leg-arrival[b-1pd92yy3v9] {
    display: flex;
    gap: 10px;
}

.leg-time[b-1pd92yy3v9] {
    font-weight: 500;
    min-width: 45px;
}

.leg-location[b-1pd92yy3v9] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-details[b-1pd92yy3v9] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.segment-confirmation[b-1pd92yy3v9] {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 12px;
    color: #777;
    border-top: 1px dotted #e0e0e0;
}

/* Panel Actions */
.panel-actions[b-1pd92yy3v9] {
    display: flex;
    gap: 10px;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.action-button[b-1pd92yy3v9] {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

    .action-button.primary[b-1pd92yy3v9] {
        background-color: #2196f3;
        color: white;
    }

        .action-button.primary:hover[b-1pd92yy3v9] {
            background-color: #1976d2;
        }

    .action-button.secondary[b-1pd92yy3v9] {
        background-color: #f5f5f5;
        color: #333;
        border: 1px solid #e0e0e0;
    }

        .action-button.secondary:hover[b-1pd92yy3v9] {
            background-color: #eeeeee;
        }

/* No trip data message */
.no-trip-data[b-1pd92yy3v9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50%;
    gap: 15px;
    color: #666;
    text-align: center;
}